<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .list{padding: 20px;background:#ccc}
        .list li{line-height:30px;margin:10px 0;background: #aaa;}
        .list li.red{background:red}
    </style>
</head>
<body>
    <ul class="list">
        <li>link1</li>
        <li>link2</li>
        <li class="red">link3</li>
        <li class="red">link4</li>
        <li>link5</li>
        <li class="red">link6</li>
        <li>link7</li>
        <li class="red">link8</li>
        <li class="red">link9</li>
    </ul>
</body>
<script>

    const list = document.querySelector(".list");
    const li = document.querySelectorAll(".list li");
    const red = document.querySelectorAll(".list .red");

    list.onclick = proxy(red, function(){
        console.log(this);
    });

    // 事件委托的封装
    function proxy(ele, cb){
        // 因为要传参所以被直接执行了
        // 又因为外部需要一个事件处理函数，所以立即返回一个新函数作为事件处理函数
        return function(eve){
            const e = eve || window.event;
            const target = e.target || e.srcElement;
            // 遍历传入的要委托事件的子元素
            [...ele].forEach(val=>{
                // 和事件目标依次判断，是否是同一个
                if(target === val){
                    // 如果是用一个元素，执行真正的功能
                    // 同时为了方便外部通过this获取事件目标，改变this指向当前事件目标
                    cb.call(target);
                }
            })
        }
    }
    
</script>
</html>